import Skeleton from 'taro-skeleton';
import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Block, Image, View} from '@tarojs/components'
import {AtSearchBar} from 'taro-ui'
import {http} from '../utils/http'
import {
  GET_WORDS, RESOURCE_URL
} from '../constants/api'
import {vcmonitor} from "../utils/tools";
import {WordList} from '../utils/server.interface'
import {getPoster} from "../utils/poster.service";
import {h5Wx} from "../utils/h5.service";
import GzhAuth from "../components/gzh-auth/gzh-auth"
import './list.scss'

export default class CheckTicket extends Component {

  state: {
    list: WordList[] | false
    searchKey: string
    loadMoreStatus: "more" | "loading" | "noMore"
    showLoading: boolean
  } = {
    list: false,
    searchKey: '',
    loadMoreStatus: 'more',
    showLoading: true
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (process.env.TARO_ENV === "weapp") {
      Taro.hideShareMenu()
    }
  }

  async componentDidShow() {
    vcmonitor(this)
    const list = (await this.getList(1)) || false
    this.setState({list, showLoading: false})
  }

  page = 1
  limite = 20

  async getList(page = 1) {
    const list = await http.get<WordList>(GET_WORDS, {p: page, search_name: this.state.searchKey, s: this.limite})
    if (list) {
      if (list.length < this.limite) {
        this.setState({loadMoreStatus: 'noMore'})
      } else {
        this.setState({loadMoreStatus: 'more'})
      }
      return list
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: "loading"})
      const old = this.state.list
      const list = (await this.getList(++this.page)) || []
      this.setState({list: [...old, ...list]})
    }
  }

  async onGetPoster(id) {
    Taro.showLoading({title: '获取海报中...'});
    const poster = await getPoster('words', id || '')
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  onSearch(searchKey) {
    this.setState({
      searchKey
    }, async () => {
      const list = (await this.getList(1)) || false
      this.setState({list})
    })
  }

  goPage(id) {
    Taro.navigateTo({
      url: '/words/detail?id=' + id
    })
  }

  render() {
    const {list, searchKey, showLoading} = this.state
    return (
      <View className='words-root'>
        <GzhAuth />
        <AtSearchBar
          className='search'
          value={searchKey}
          onChange={this.onSearch.bind(this)}
        />
        {list && list.length > 0 && <view className='words'>
          <Skeleton loading={showLoading} row={5} rowHeight={200}>
            <Block>
              {list.map((item, index) =>
                <View className='words-item' key={index}>
                  <View className='left' onClick={this.goPage.bind(this, item.id)}>
                    <View className='words-title'>{item.title}</View>
                    <View className='words-data'>更新时间:{item.update_date}</View>
                  </View>
                  <View className='img' onClick={this.onGetPoster.bind(this, item.id)}><Image
                    src={RESOURCE_URL + "/resources/weapp/images/rwm-icon.png"}
                  /></View>
                </View>
              )}
            </Block>
          </Skeleton>
        </view>}
      </View>
    )
  }
}
